<template>
  <div class="workBench ">
    <el-container class="search-content">
      <el-row>
        <!--左侧菜单树-->
        <el-col :span="5" class="left_tree">
          <el-scrollbar wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="false" style="height:100%;">
            <ul class="treeDom">
              <li style="display:flex;align-item:center;justify-content:space-between;">
                我的关注
                <span @click="addFenzu">+</span>
              </li>
              <li :class="index == curtreeDom ?'active':''" v-for="(item,index) in treeData" :key="'treeData'+index" @click="selectLeftTree(item,index)">
                <div>
                  <i class="fa fa-file-o"></i>
                  {{item.displayname}}
                </div>
                <div style="display:flex;align-items:center;padding-right:10px;">
                  <div class="bage" v-if="item.counts>0">
                    {{item.counts}}
                  </div>
                  <span class="icon iconfont icon-icon associationGraph" title="添加到目标分析" @click="add_guanlian(item.id)"></span>
                </div>
                <i class="fa fa-close close" @click.stop="removeGroup(item.id)"></i>
              </li>
            </ul>
          </el-scrollbar>
        </el-col>
        <el-col :span="19" class="elTable">
          <!-- 搜索 -->
          <div class="top_bar">
            <div class="search">
              <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select" @keyup.enter.native="clickSearch">
                <el-button slot="append" icon="el-icon-search" @click="clickSearch"></el-button>
              </el-input>
            </div>
            <el-button type="success" @click="openAddDialog()">添加数据</el-button>
          </div>
          <!-- 显示搜索结果 -->
          <p style="padding:5px 10px">共{{count}}条搜索结果</p>
          <template v-if="loading === 1">
            <div class="allPage">
              <div class="left">
                <!--分组用户列表-->
                <ul class="groupListUl">
                  <li @click="listClick(item,index)" :class="groupList_active == index?'active':''" v-for="(item,index) in groupList" :key="'groupList'+index">
                    <div class="top_li">
                      <div class="info">
                        <div class="info_left">
                          <img @click.stop="selectGroupList(item)" class="icon" :src="item.iconUrl" alt="">
                          <span @click.stop="selectGroupList(item)" class="name  u-textTruncate">{{item.showName?item.showName:item.displayName}}</span>
                          <span>-</span>
                          <span class=" u-textTruncate">{{item.name}}</span>
                        </div>
                        <div class="operating">
                          <el-button type="primary" size="small" plain @click="openmoveGroup(item)">移动到分组</el-button>
                          <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="deleteObject(item,index)"></el-button>
                        </div>
                      </div>
                      <ul class="labels">
                        <el-tag v-for="(list,listIndex) in item.tags" :key="list" type="success" class="tag_list">{{list}}
                          <el-popover placement="top" width="160" trigger="click">
                            <p style="padding:10px 0">确定删除此标签吗？</p>
                            <div style="text-align: right; margin: 0">
                              <el-button type="primary" size="mini" @click.stop="delTag(item.rowkey,list,listIndex,index,item)">确定</el-button>
                            </div>
                            <span class="x" title="删除" slot="reference" @click.stop="eventPreventDefault">x</span>
                          </el-popover>
                        </el-tag>
                        <span @click="addtags(item.tags,item.rowkey,index)" class="tag_list el-tag el-tag--primary">设置标签</span>
                      </ul>
                    </div>

                    <el-tooltip class="item" effect="dark" :content="item.description" placement="bottom">
                      <p class="introduce" v-if="item.description">
                        最近活动情况:{{item.description}}
                      </p>
                    </el-tooltip>
                  </li>
                </ul>
                <!-- 分页 -->
                <div class="pagination">
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[1,5, 10, 20, 50]" :page-size="page_size" layout="sizes, prev, pager, next,total, jumper" :total="count">
                  </el-pagination>
                </div>
              </div>
              <!-- <div class="right">
                <template v-if="relationListData && relationListData.length>0">
                  <div class="article-container">
                    <template v-for=" (item,index) in relationListData">
                      <article-info :key="index" :info="item"></article-info>
                    </template>
                  </div>
                  <el-pagination style="margin-top:16px;" background layout="prev, next,total" :current-page="relationListCurpage" :page-size="relationListSize" @current-change="relationListChangePage" :total="relationListTotal">
                  </el-pagination>
                </template>
                <template v-else>
                  <div class="nodata">
                    暂无数据
                  </div>
                </template>
              </div> -->
            </div>
          </template>
          <div v-else-if="loading === 0" class="loading_text">
            暂无数据
          </div>
          <div v-else-if="loading === -1" class="loading_text">
            <i class="el-icon-loading"></i>数据加载中
          </div>
        </el-col>
      </el-row>
    </el-container>
    <el-dialog title="新增数据" :visible.sync="dialogPacketDataVisible" class="dialog_packet">
      <div>
        <el-input placeholder="请输入搜索内容" v-model="PacketDataSearch" class="input-with-select" @keyup.enter.native="searchPacketData()">
          <el-button slot="append" icon="el-icon-search" @click="searchPacketData"></el-button>
        </el-input>
      </div>
      <div class="PacketDataList">
        <!-- 全选 -->
        <el-checkbox v-model="checkAllstate" @change="checkAll" v-if="PacketDataList && PacketDataList.length > 0" class="checkall">全选</el-checkbox>
        <ul>
          <li v-for="(list,index) in PacketDataList" :key="'PacketDataList'+index" class="PacketLiType">
            <!-- <el-checkbox v-model="checkedList" :value="list.rowkey"></el-checkbox> -->
            <input type="checkbox" :value="list" v-model="checkedList">
            <img :src="list.iconUrl" alt="头像">
            <div class="list_content">
              <div class="top">
                <div class="title">
                  <p class="name">{{list.showName?list.showName:list.displayName}}</p>
                  <span></span>
                </div>
                <span>{{list.postTime}}</span>
              </div>
              <div class="description">
                {{list.description}}
              </div>
            </div>
          </li>
          <el-pagination v-if="PacketDataList && PacketDataList.length > 0" style="margin-top:16px;" background layout="prev, next,total" :current-page="PacketDataPage" :page-size="PacketDataPageSize" @current-change="PacketDataChangePage"
            :total="PacketDataTotal">
          </el-pagination>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer" v-if="PacketDataList && PacketDataList.length > 0">
        <el-button @click="dialogPacketDataVisible = false">取 消</el-button>
        <el-button type="primary" @click="addToGroupTree">添加到分组</el-button>
      </div>
    </el-dialog>
    <!-- 设置标签模态框 -->
    <tag-management ref="tagManagement" :parseTagsList='parseTagsList' @markTags='markTags' @getTags='getTags'></tag-management>
    <!-- 设置分组模态框 -->
    <el-dialog title="分组设置" :visible.sync="groupDialogVisible" width="40%">
      <subscribegroup-tree :groupObjs="groupObjs" ref="subscribegroupTree" v-on:closeDialog="closeDialog"></subscribegroup-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="groupDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="markGroup">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import util from '@/utils'
import {
    getsubscribeTree,
    getInstance,
    getcount,
    deleteTag,
    addTag,
    findAllTag,
    mobileGrouping,
    deleteinstance,
    groupSaveOrUpdate,
    tagsSaveOrUpdate,
    listFullText,
    addInstance,
    deleteSubscribeGroup,
    countFullText,
    relationList,
    relationListCount
} from '@/api/workBench'
import {
    getAssociationAttr,
    saveOrUpdateSubscribeGroup,
    tagsSave
} from '@/api/search'
import tagManagement from '.././search/tag-management.vue'
import subscribegroupTree from '.././search/subscribegroup-tree.vue'
const ArticleInfo = () => import('./article-info.vue')
export default {
    data () {
        return {
            // 用户关联数据当前页
            relationListCurpage: 1,
            // 用户关联数据一页数量
            relationListSize: 10,
            // 用户关联数据当前页
            relationListData: [],
            // 用户关联数据总页数
            relationListTotal: 0,
            // 当前用户
            currentRelationRole: {},
            // 全选
            checkAllstate: false,
            // 选中的列表
            checkedList: [],
            // 新增分组数据的搜索值
            PacketDataSearch: '',
            // 新增分组数据分页
            PacketDataPage: 1,
            PacketDataPageSize: 10,
            // 新增分组列表的数据
            PacketDataList: [],
            PacketDataTotal: 0,
            // 新增分组数据弹窗
            dialogPacketDataVisible: false,
            defaultProps: {
                displayname: 'displayname',
                label: 'displayname'
            },
            // 用户列表数据
            groupList: [],
            // 左侧树当前选择
            curtreeDom: 0,
            // 当前页
            page: 1,
            // 总数量
            count: 0,
            // 每页条数
            page_size: 10,
            // 当前groupId
            curGroupId: '',
            // 搜索内容
            searchValue: '',
            // 搜索选择项
            searchSelect: '',
            groupList_active: -1,
            // 树节点是否展开
            expandAll_flag: true,
            // 左侧菜单树数据
            treeData: [],
            // 用户列表没数据时是否显示加载动画 (-1表示正在加载 0 表示加载成功但是数据为0 1表示数据存在)
            loading: 0,
            // 添加标签弹窗
            addTagDialogVisible: false,
            // 当前所有的tag
            allTag: [],
            // 选中的tag
            checkList: [],
            // 新输入的tab
            newtag: '',
            // 当前rowkey
            currentRowkey: '',
            // 移动分组信息
            moveGroupInfo: {
                gid_old: '',
                gid_new: '',
                rowkeys: []
            },
            // 初始化的标签列表
            parseTagsList: [],
            // 分组模态框
            groupDialogVisible: false,
            // 传给分组的数据,
            groupObjs: []
        }
    },
    components: {
        ArticleInfo,
        tagManagement,
        subscribegroupTree
    },
    watch: {
        parseTagsList: function () {
            this.tagsCheckedList = []
            this.parseTagsList.forEach(item => {
                if (item.isChecked) this.tagsCheckedList.push(item.displayname)
            })
        }
    },
    computed: {
        tagsCheckedList: {
            get: function () {
                let a = []
                this.parseTagsList.forEach(item => {
                    if (item.isChecked) a.push(item.displayname)
                })
                return a
            },
            set: function () {}
        }
    },
    created () {},
    mounted () {
    // 获取左侧树数据
        this.loadTree()
        this.getTags()
    },
    methods: {
        eventPreventDefault () {},
        // 用户关联数据分页
        relationListChangePage (val) {
            this.relationListCurpage = val
            this.relationList()
        },
        // 分组上下页切换
        PacketDataChangePage (val) {
            this.PacketDataPage = val
            this.searchPacketData()
        },
        // 删除分组
        removeGroup (id) {
            deleteSubscribeGroup(id).then(result => {
                if (result.status == 200) {
                    this.loadTree('delTree')
                    this.$message(result.msg)
                }
            })
        },
        closeDialog () {
            this.groupDialogVisible = false
        },
        // 添加到分组
        addToGroupTree () {
            console.log(this.checkedList)
            let objs = this.checkedList.map(item => {
                return {
                    objectUri: item.objectUri,
                    rowkey: item.rowkey
                }
            })
            let params = {
                gid: this.curGroupId,
                objs: objs
            }
            addInstance(params).then(response => {
                this.dialogPacketDataVisible = false
                this.loadTree('addTree', this.curGroupId)
                this.$message.success(response.msg)
            })
        },
        // 全选
        checkAll () {
            this.checkedList = []
            if (this.checkAllstate) {
                for (let item of this.PacketDataList) {
                    this.checkedList.push(item)
                }
            } else {
                this.checkedList = []
            }
        },
        // 打开添加数据
        openAddDialog () {
            this.dialogPacketDataVisible = true
            this.PacketDataList = []
            this.PacketDataPage = 1
            this.PacketDataSearch = ''
            this.checkAllstate = false
        },
        // 查询分组数据
        searchPacketData () {
            let params = {
                keywords: [this.PacketDataSearch],
                curpage: this.PacketDataPage,
                persize: this.PacketDataPageSize,
                objectType: 'socialaccount,keyfigures,focusgroup'
            }
            listFullText(params).then(result => {
                if (result.status == 200) {
                    this.PacketDataList = result.data
                    this.PacketDataList.forEach(item => {
                        if (item.personIconUrl) {
                            item.iconUrl = item.personIconUrl
                        }
                    })
                }
            })
            countFullText(params).then(result => {
                if (result.status == 200) {
                    this.PacketDataTotal = result.data.countTotal
                }
            })
        },
        // 添加分组
        addFenzu () {
            this.$prompt('请输入分组', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
                .then(({ value }) => {
                    groupSaveOrUpdate({ displayname: value, parentid: '', id: '' }).then(
                        result => {
                            if (result.status == 200) {
                                this.loadTree('addTree', result.data.id)
                                this.$message({
                                    type: 'success',
                                    message: '新分组: ' + value
                                })
                            }
                        }
                    )
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    })
                })
        },
        listClick (item, index) {
            this.groupList_active = index
            this.currentRelationRole = {
                objectUri: item.objectUri,
                rowkey: item.rowkey
            }
            this.relationList()
        },
        // 添加到目标分析
        add_guanlian (groupid) {
            sessionStorage.setItem('groupId', groupid)
            // this.$message.success({
            //     message: '添加成功',
            //     duration: '1000'
            // })
            this.$router.push({
                path: '/relationGraph',
                query: { groupId: groupid }
            })
        },
        // 获取用户关联动态数据
        relationList () {
            let params = {
                rowkey: this.currentRelationRole.rowkey,
                // objectUri:this.currentRelationRole.objectUri,
                curpage: this.relationListCurpage,
                pagesize: this.relationListSize,
                groupId: this.curGroupId
            }
            relationList(params).then(result => {
                if (result.status == 200) {
                    this.relationListData = result.data.list
                    this.relationListTotal = result.data.count
                }
            })
        },
        // 获取分组列表
        async getList (params) {
            // 还原初始值
            this.loading = -1
            this.count = 0
            this.groupList_active = -1
            // this.currentRelationRole.rowkey = ''
            // 赋值数据
            let result = await getInstance(params)
            if (result.status == 200) {
                this.groupList = result.data
                this.groupList.forEach(item => {
                    if (item.personIconUrl) {
                        item.iconUrl = item.personIconUrl
                    }
                })
                // 获取数据的总量
                let countResult = await getcount({
                    groupId: this.curGroupId,
                    keyword: this.searchValue
                })
                if (countResult.status == 200) {
                    this.count = countResult.data
                }
                if (this.count > 0) {
                    // 展示数据
                    this.loading = 1
                    this.currentRelationRole = {
                        objectUri: this.groupList[0].objectUri,
                        rowkey: ''
                    }
                    this.relationList()
                } else {
                    // 展示数据
                    this.loading = 0
                }
            }
        },
        // 点击搜索
        clickSearch () {
            this.page = 1
            this.page_size = 10
            let params = {
                groupId: this.curGroupId,
                keyword: this.searchValue,
                curpage: this.page,
                pagesize: this.page_size
            }
            this.getList(params)
        },
        // 加载左侧菜单树
        async loadTree (type, treeId) {
            let result = await getsubscribeTree({ top: 'false' })
            this.treeData = result.data
            if (this.treeData.length <= 0) {
                return
            }
            this.curGroupId = this.treeData[0].id
            if (type == 'addTree') {
                this.treeData.forEach((value, index) => {
                    if (value.id == treeId) {
                        this.curtreeDom = index
                        this.curGroupId = this.treeData[index].id
                    }
                })
            } else if (type == 'delTree') {
                this.curtreeDom = 0
                this.curGroupId = this.treeData[0].id
            }
            // 获取用户列表
            let params = {
                keyword: this.searchValue,
                groupId: this.curGroupId,
                curpage: this.page,
                pagesize: this.page_size
            }
            this.getList(params)
        },
        // 左侧菜单选择事件
        async selectLeftTree (node, index) {
            // 赋值当前curGroupId
            this.curGroupId = node.id
            this.curtreeDom = index
            // 当前页和当前页数据条数复原
            this.page = 1
            this.page_size = 10
            let params = {
                keyword: this.searchValue,
                groupId: this.curGroupId,
                curpage: this.page,
                pagesize: this.page_size
            }
            this.getList(params)
        },
        // 目标选择点击
        selectGroupList (item) {
            let currentUrl = window.location.href.split('#')[0]
            currentUrl = `${currentUrl}#/obj-show?objectType=${
                item.objectType
            }&instanceUri=${item.rowkey}&objectUri=${item.objectUri}&displayName=${
                item.showName ? item.showName : item.displayName
            }&icon=${item.iconUrl}&name=${item.name}&belongGroup=${item.belongGroup}`

            // currentUrl = `${currentUrl}#/display?objectType=${
            //     item.objectType
            // }&instanceUri=${item.rowkey}&objectUri=${item.objectUri}&displayName=${
            //     item.showName ? item.showName : item.displayName
            // }&icon=${item.iconUrl}&name=${item.name}&belongGroup=${item.belongGroup}`
            window.open(currentUrl, '')
        },

        // 每页条数调整
        handleSizeChange (val) {
            // 强制到第一页
            this.page = 1
            // 设置当前页数据条数
            this.page_size = val
            let params = {
                keyword: this.searchValue,
                groupId: this.curGroupId,
                curpage: this.page,
                pagesize: this.page_size
            }
            this.getList(params)
        },
        // 当前页
        handleCurrentChange (val) {
            // 设置当前页
            this.page = val
            let params = {
                keyword: this.searchValue,
                groupId: this.curGroupId,
                curpage: val,
                pagesize: this.page_size
            }
            this.getList(params)
        },
        // 打开分组弹窗
        openmoveGroup (data) {
            this.selectedData = data
            let params = {
                objectUri: data.objectUri,
                rowkey: data.rowkey
            }
            this.groupObjs = []
            this.groupObjs.push(params)
            this.groupDialogVisible = true
        },
        // 移动分组选择
        moveGroupChnage (node) {
            this.moveGroupInfo.gid_old = this.curGroupId
            this.moveGroupInfo.gid_new = node.id
        },
        markGroup () {
            this.$refs.subscribegroupTree.chooseGroupTree()
        },
        // 确定移动分组
        async moveGroup () {
            let params = {
                gid_old: this.moveGroupInfo.gid_old,
                gid_new: this.moveGroupInfo.gid_new,
                rowkeys: this.moveGroupInfo.rowkeys
            }
            mobileGrouping(params).then(result => {
                if (result.status == 200) {
                    this.curtreeDom = 0
                    this.loadTree('addTree', this.moveGroupInfo.gid_new)
                    this.moveDialogVisible = false
                    this.moveGroupInfo = {
                        gid_old: '',
                        gid_new: '',
                        rowkeys: []
                    }
                }
            })
        },
        // 删除标签
        delTag (rowkey, tag, listIndex, index, item) {
            this.currentTAgIndex = index
            let params = {
                rowkey: rowkey,
                tag: tag,
                objecturi: item.objectUri
            }
            deleteTag(params).then(response => {
                if (response.status == 200) {
                    this.$message.success('成功删除标签')
                    item.tags.splice(listIndex, 1)
                    // this.listClick(item,index)
                } else {
                    this.$message.error('删除标签失败')
                }
                // this.visibledelete = false
            })
        },
        // 添加标签
        addtags (tags, rowkey, index) {
            this.currentTAgIndex = index
            this.checkList = []
            this.newtag = ''
            // 当前rowkey
            this.currentRowkey = rowkey
            this.currentObjTags = tags
            this.getTags(this.currentObjTags)
            this.parseTagsList.forEach(item => {
                item.isChecked = false
            })
            this.$nextTick(() => {
                this.$refs.tagManagement.tagsDialogVisible = true
            })
        },
        markTags (data) {
            if (data.length === 0) {
                this.$message.error('请选择标签')
                return
            }
            let params = {
                rowkeyList: [
                    {
                        rowkey: this.currentRowkey,
                        objecturi: this.currentRelationRole.objectUri
                    }
                ],
                tagList: data
            }
            tagsSave(params).then(response => {
                this.$refs.tagManagement.tagsDialogVisible = false
                this.$set(this.groupList[this.currentTAgIndex], 'tags', [
                    ...this.groupList[this.currentTAgIndex].tags,
                    ...data
                ])
            })
        },
        // 查询出所有标签
        // findAll (currentObjTags) {
        //     findAllTag().then(result => {
        //         if (result.status == 200) {
        //             this.allTag = result.data.filter(item => {
        //                 return !(
        //                     currentObjTags && currentObjTags.includes(item.displayname)
        //                 )
        //             })
        //         }
        //     })
        // },
        getTags (currentObjTags) {
            console.log(currentObjTags)
            findAllTag().then(response => {
                response.data = response.data.filter(item => {
                    return !(currentObjTags && currentObjTags.includes(item.displayname))
                })
                response.data.forEach(item => {
                    item.isChecked = false
                })
                this.parseTagsList = response.data
                this.parseTagsList.forEach(item => {
                    item.value = item.displayname
                })
            })
        },
        // 删除整条数据
        deleteObject (item, index) {
            let params = {
                gid: this.curGroupId,
                rowkeys: [item.rowkey]
            }
            deleteinstance(params).then(async result => {
                let response = await getsubscribeTree({ top: 'false' })
                this.treeData = response.data
                this.curGroupId = this.treeData[this.curtreeDom].id
                // 获取用户列表
                let params = {
                    groupId: this.curGroupId,
                    curpage: this.page,
                    pagesize: this.page_size
                }
                this.getList(params)
            })
        }
    }
}
</script>
<style lang="less" scoped>
.addNewtag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  input {
    flex: 1;
  }
}
.checkList {
  padding: 15px 0;
}
.is-dark {
  max-width: 80% !important;
}
.workBench {
  background: #e8edf1;
  height: 100%;
  .el-row {
    width: 100%;
  }
  .search-content {
    padding: 0;
    overflow-x: hidden;
    height: 100%;
    .left_tree {
      height: 100%;
      padding: 10px 5px 0 5px;
      .treeDom {
        height: 100%;
        background: #fff;
        li {
          color: #666;
          background: #fff;
          border-bottom: 1px solid#f4f4f5;
          padding: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-left: 3px solid#ffffff;
          position: relative;
          .bage {
            margin: 0 10px;
            border-radius: 10px;
            background: #5477bf;
            padding: 2px 10px;
            color: #ffffff;
          }
          .close {
            position: absolute;
            right: 8px;
            top: -1px;
            opacity: 0;
          }
          &:hover {
            cursor: pointer;
            background: #f4f4f5;
            .close {
              opacity: 1;
              color: #ff6066;
            }
          }
          &.active {
            background: #f4f4f5;
            border-left: 3px solid#ff6066;
          }
        }
      }
    }
    .elTable {
      padding: 10px 5px 0 5px;
      height: 100%;
      overflow-y: auto;
      .top_bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        .search {
          flex: 1;
          padding: 10px 20px;
        }
      }
      .allPage {
        display: flex;
        align-items: flex-start;
        .left {
          width: 100%;
          max-height: 700px;
          // margin-right: 1%;
          overflow: auto;
          background: #fff;
          .groupListUl {
            background: #ffffff;
            margin: 5px 5px 0 0;
            li {
              padding: 15px;
              border-bottom: 1px solid#f4f4f5;
              &:hover {
                background: #f4f4f5;
              }
              &.active {
                background: #f4f4f5;
              }
              .top_li {
                .info {
                  flex: 0 0 auto;
                  display: flex;
                  flex-wrap: nowrap;
                  align-items: center;
                  justify-content: space-between;
                  .info_left {
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    flex-shrink: 1;
                    .icon {
                      border-radius: 50%;
                      margin: 0 10px;
                      width: 30px;
                      height: 30px;
                      &:hover {
                        cursor: pointer;
                      }
                    }
                    .name {
                      &:hover {
                        color: #009cf5;
                        cursor: pointer;
                      }
                    }
                  }
                  .operating {
                    justify-items: flex-end;
                    position: relative;
                    flex-shrink: 0;
                    .moveTree {
                      position: absolute;
                      right: 0;
                      width: 300px;
                      z-index: 10;
                    }
                  }
                }
                .labels {
                  margin: 0 10px;
                  .tag_list {
                    // width: 300px;
                    margin: 10px 3px;
                  }
                  .tag_list .x {
                    opacity: 0;
                    font-size: 14px;
                  }
                  .tag_list:hover .x {
                    opacity: 1;
                  }
                  .x:hover {
                    font-weight: bold;
                  }
                  &:hover {
                    cursor: pointer;
                  }
                }
              }

              .introduce {
                padding: 10px 0 5px 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                line-height: 20px;
              }
            }
          }
          .pagination {
            text-align: center;
            padding: 10px;
          }
        }
        .right {
          width: 50%;
          min-height: 400px;
          max-height: 700px;
          background: #fff;
          overflow: auto;
          position: relative;
          .nodata {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .loading_text {
      min-height: 300px;
      background: #fff;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 20px;
        margin-right: 5px;
      }
    }
  }
}
.moveDialog {
  max-height: 300px;
  overflow-y: auto;
}
.dialog_packet {
  .PacketDataList {
    .checkall {
      padding: 9px 12px;
    }
    .PacketLiType {
      display: flex;
      align-items: flex-start;
      padding: 5px;
      min-height: 51px;
      padding: 9px 12px;
      line-height: 20px;
      border-bottom: 1px solid #e6ecf0;
      cursor: pointer;
      input[type='checkbox'] {
        height: 30px;
        line-height: 30px;
        margin-right: 15px;
      }
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
      .list_content {
        padding-left: 15px;
        flex: 1;
        overflow: hidden;
        word-break: break-all;
        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          div.title {
            display: flex;
            align-items: flex-start;
            p.name {
              flex-shrink: 1;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            span {
              white-space: nowrap;
              padding-left: 10px;
            }
          }
        }
      }
      .description {
      }
    }
  }
}
</style>
<style lang="less">
.workBench {
  .moveDialog {
    .el-tree-node__content {
      height: 42px !important;
      border-bottom: 1px solid #f4f4f5;
      border-left: 2px solid #ffffff;
    }
    .el-tree {
      .el-tree-node:focus > .el-tree-node__content {
        background: #f3f3f3 !important;
        border-left: 2px solid#e46758;
      }
      .el-tree-node__content > .el-tree-node__expand-icon {
        display: none;
      }
    }
  }

  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-scrollbar__view {
    height: 100%;
  }
}
.addNewtag {
  .el-input {
    width: 100% !important;
  }
}
.u-textTruncate {
  max-width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
}
</style>
